<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <meta charset="utf-8" />
    <link
      rel="stylesheet"
      href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css"
      integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI="
      crossorigin=""
    />
    <script
      src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"
      integrity="sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM="
      crossorigin=""
    ></script>
    <style>
      #map {
        height: 800px;
        width: 100%;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
	<div class="btns" style="position: absolute; right: 20px; top: 12px; z-index: 8000">
      地图类型：<input type="radio" value="1" name="mapType" checked="checked" id="normal">矢量地图
      <input type="radio" value="2" name="mapType" id="Satellite">卫星地图
    </div>
    <script>
	var map = null;
	var  tileLayer = null;
	var titleGaoDe = {
	"normal":'http://webrd02.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}',
	"satellite":"https://webst01.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}"
	}
	initMap();
	
	function initMap(){
		 map = L.map('map').setView([27.249374, 117.624815], 15);
		 var url = titleGaoDe["normal"];
		tileLayer = L.tileLayer( url).addTo(map);
		  var marker = L.marker([27.249374, 117.624815]).addTo(map);
		const normal = document.getElementById('normal');
		const Satellite = document.getElementById('Satellite');
		normal.addEventListener('change', () =>{
			cleartitleLayer();
			 var url = titleGaoDe["normal"];
		     tileLayer = L.tileLayer( url);
			 		tileLayer.addTo(map);
		});
		Satellite.addEventListener('change', () =>{
			cleartitleLayer();
			 var url = titleGaoDe["satellite"];
		    tileLayer = L.tileLayer( url);
			tileLayer.addTo(map);
			
		});
    }
   
	  //移除瓦片层
	  function cleartitleLayer(){
	  if(map&&tileLayer){//removeLayer
	  map.removeLayer(tileLayer);
	  }
	  }
    </script>
  </body>
</html>
